<template>
    <div class="dialog-wrap">
        <el-dialog :title="title" :visible.sync="centerDialogVisible" :show-close="showClose" @close="onDialogClose"
            :width="dialogWidth" center>
            <slot></slot>
            <span slot="footer" class="dialog-footer" v-if="showBtns">
                <el-button type="primary" @click="dialogConfirmClick">确 定</el-button>
                <el-button @click="dialogVisibleCancelClick">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'commonpagination',
        props: {
            title: {
                required: true,
            },
            dialogVisible: {
                required: true,
                default: false
            },
            showClose: {
                default: true
            },
            showBtns: {
                default: true
            },
            
            dialogWidth:{
                default: "30%"
            }
        },
        data() {
            return {
                centerDialogVisible: this.dialogVisible
            };
        },
        computed: {},
        mounted() {

        },
        methods: {
            dialogConfirmClick() {
                this.$emit('confirm')
            },
            dialogVisibleCancelClick() {
                this.$emit('cancel')
            },
            onDialogClose() {
                this.$emit('dialog-close')
            }
        },
        watch: {
            dialogVisible(val) {
                this.centerDialogVisible = val;
            }
        }
    }
</script>

<style lange="less" scoped>
    
</style>
